<template>
	<div id="appList">
		<div style="height:50px;width:100%;">
			<form style="margin:30px">
				<table>
					<tr>
						<th>
							<label>应用编号 :</label>
						</th>
						<td>
							<input type="text" class="form-control">
						</td>
						<th>
							<label>应用名称 :</label>
						</th>
						<td>
							<input type="text" class="form-control">
						</td>
						<th>
							<label>用户名称 :</label>
						</th>
						<td>
							<input type="text" class="form-control">
						</td>
						<td>
							<el-button type="primary" @click="query">查询</el-button>
						</td>
						<td>
							<el-button type="info" @click="addApp">新增</el-button>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div style="width:98%;margin:auto">
			<div class="table-responsive">
				<div id="sample-table-2_wrapper" class="dataTables_wrapper">
					<table id="sample-table-2" class="table table-striped table-bordered table-hover dataTable">
						<thead>
							<tr role="row">
								<th class="center sorting_disabled" style="width: 66px;">
									<label>
										<input type="checkbox" class="ace">
										<span class="lbl"></span>
									</label>
								</th>
								<th class="" style="width: 184px;">应用编号</th>
								<th class="" style="width: 129px;">应用名称</th>
								<th class="hidden-480 " style="width: 138px;">默认地址</th>
								<th class="" style="width: 201px;">
									Update
								</th>
								<th class="hidden-480 " style="width: 192px;">申请状态</th>
								<th class="sorting_disabled" style="width: 173px;">操作</th>
							</tr>
						</thead>
					</table>
					<div style="height:300px;overflow:auto;">
						<table id="sample-table-2" class="table table-striped table-bordered table-hover dataTable">
							<tbody role="alert" aria-live="polite" aria-relevant="all">
								<tr class="odd" v-for="(d,index) in list">
									<td class="center  sorting_1" style="width: 66px;">
										<label>
											<input type="checkbox" class="ace">
											<span class="lbl"></span>
										</label>
									</td>

									<td class=" " style="width: 184px;">{{index + 1}}</td>
									<td class=" " style="width: 129px;">{{d['appCode']}}</td>
									<td class="hidden-480 " style="width: 138px;">{{d.appName}}</td>
									<td class=" " style="width: 201px;">Feb 12</td>
									<td class="hidden-480 " style="width: 192px;">
										<span class="label label-sm label-warning">已申请</span>
									</td>

									<td class=" " style="width: 173px;">
										<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
											<a class="green" href="#">
												<i class="icon-pencil bigger-130" @click="editApp(index)"></i>
											</a>

											<a class="red" href="#">
												<i class="icon-trash bigger-130"></i>
											</a>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="row" style="height: 55px;">
						<div class="col-sm-6">
							<div class="dataTables_info" id="sample-table-2_info" style="float: left;">
								<label>每页
									<select size="1" name="sample-table-2_length">
										<option value="10" selected="selected">10</option>
										<option value="25">25</option>
										<option value="50">50</option>
										<option value="100">100</option>
									</select>记录，</label>第1页,共有23页
							</div>
						</div>

						<div class="col-sm-6">
							<div class="dataTables_paginate paging_bootstrap">
								<ul class="pagination">
									<li class="prev disabled">
										<a href="#">
											<i class="icon-double-angle-left"></i>
										</a>
									</li>
									<li class="active">
										<a href="#">1</a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<li class="next">
										<a href="#">
											<i class="icon-double-angle-right"></i>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<Dialog ref="Dialog" @addBack="addAppBack" @editBack="editAppBack"></Dialog>
		</div>
	</div>
</template>

<script>
import Dialog from "../components/Dialog";
export default {
    name: "AppList",
    components: {
        Dialog: Dialog
    },
    data() {
        return {
            msg: "Welcome to Your Vue.js App",
            dialogShow: false,
            title: "测试",
            width: "300",
            height: "400",
            list: [
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                }
            ]
        };
    },
    methods: {
        query() {
            this.list = [
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                },
                {
                    appCode: "test",
                    appName: "测试名称",
                    appPath: "www.baidu.com"
                }
            ];
        },
        addApp() {
            this.$refs.Dialog.dialogShow({
                title: "增加应用",
                width: this.width,
                height: this.height,
                path: "/addApp",
                callBack: "addBack"
            })
		},
		//对话框回调消息
		addAppBack(params){
			console.log("接收到添加回调消息")
			console.log(params)
		},
        editApp(id) {
            this.$refs.Dialog.dialogShow({
                title: "编辑应用",
                width: this.width,
                height: this.height,
                path: "/editApp",
                params: {
                    id: id
				},
				callBack: "editBack"
            });
		},
		editAppBack(params){
			console.log("接收到修改回调消息")
			console.log(params)
		}
    }
};
</script>

<style >

</style>
